<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="../public/css/common.css">
    <link rel="stylesheet" href="css/couponDetail.css">
    <link rel="stylesheet" href="../public/css/bootstrap.css">
    <link rel="stylesheet" href="../public/iconfont/iconfont.css">

    <title>首页</title>
</head>
<body>
<!--共用头部 head-->
<template data-src="../public/layout/header.html"></template>
<!--共用头部 head end-->

<div class="page-width">
    <div id="myCarousel" class="carousel slide clearfix rel" data-ride="carousel">
        <!-- 轮播（Carousel）指标 -->
        <ol class="carousel-indicators my-indicators">
            <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
            <li data-target="#myCarousel" data-slide-to="1"></li>
        </ol>
        <!-- 轮播（Carousel）项目 -->
        <div class="carousel-inner">
            <div class="item active">
                <img src="images/banner.jpg" alt="First slide" width="100%"
                     style="text-align: center;display: block;margin: auto; height: auto;">
            </div>
            <div class="item">
                <img src="images/banner.jpg" alt="Second slide" width="100%"
                     style="text-align: center;display: block;margin: auto;height: auto;">
            </div>
        </div>

    </div>
    <div class="coupon-info clearfix">
        <div>
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class=" btn-buy btn-exchange">立即兑换</a>
        </div>
        <div class="">
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class="btn-buy">立即购买</a>
        </div>
        <div class="">
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class="btn-buy">立即购买</a>
        </div>
    </div>
    <div class="coupon-info clearfix">
        <div>
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class="btn-buy btn-exchange">立即兑换</a>
        </div>
        <div>
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class="btn-buy js-receive">免费领取</a>
        </div>
        <div>
            <div class="center-img">
                <img src="images/center.png" alt="">
                <p>15元</p>
                <p class="menkan">无门槛优惠券</p>
            </div>
            <div class="main-info">
                <p class="coupon-type">YOTA健康餐15元优惠券</p>
                <p class="coupon-value">12现金</p>
                <p><span>已领67%</span><span><img src="images/flow.png" width="60%"></span></p>
            </div>
            <a class="btn-buy js-receive">免费领取</a>
        </div>
    </div>
</div>

<!--弹窗-->
<div class="popup-bg first-step" style="display: none">
    <div class="layer-exchange">
        <p class="fr icon iconfont guanbi">&#xe63d;</p>
        <p class="coupon-name">YOTA健康15元优惠券</p>
        <p><span class="integral-count">10元积分</span><span class="icon iconfont">&#xe6ec;累计领取量：80</span></p>
        <div class="phone-check">
            <p class="phone-num"><i class="icon iconfont">&#xe66b;</i>
                <input type="text" placeholder="请输入您的手机号码">
            </p>
            <p class="verification-num">
                <input type="text" placeholder="请输入验证码">
                <a class="send1 fr" onclick="sends.send();">发送验证码</a>
            </p>
        </div>
        <a class="btn-sure btn-exchange">确认</a>
    </div>
</div>
<div class="popup-bg second-step" style="display: none">
    <div class="sure-exchange sure-shape">
        <p class="exchange-integration"><i class="icon iconfont">&#xe667;</i>您将支付5积分进行兑换确定兑换？</p>
        <div class="rel">
            <img src="images/exchange-img.png" alt="">
            <div class="ab">
                <p>￥<span>5</span></p>
                <p>[满99可用]</p>
                <p>[购物商城]哈尔滨旗航店</p>
            </div>
        </div>
        <div class="layerBtn clearfix">
            <a class="js-sure">确定兑换</a>
            <a class="js-cancle">取 消</a>
        </div>
    </div>
</div>
<div class="popup-bg third-step" style="display: none">
    <div class="sure-used sure-shape">
        <p class="exchange-integration"><i class="icon iconfont">&#xe667;</i>您将支付5积分进行兑换确定兑换？</p>
        <div class="rel">
            <img src="images/exchange-img.png" alt="">
            <div class="ab">
                <p>￥<span>5</span></p>
                <p>[满99可用]</p>
                <p>[购物商城]哈尔滨旗航店</p>
            </div>
        </div>
        <div class="layerBtn clearfix">
            <a class="js-used">立即使用</a>
            <a class="js-cancle">取 消</a>
        </div>
    </div>
</div>
<div style="display: none" class="receive-popup">
    <div class="popup-logo">
        <i class="iconfont">&#xe667;</i>
    </div>
    <div class="popup-top"><p>恭喜你， 领取成功！</p></div>
    <div class="popup-bot"><p>感谢您的参与.&nbsp;&nbsp;祝您购物愉快</p></div>
    <div class="popup-btns">
        <div class="btns-wrapper">
            <a class="btns-left" href="javascript:void(0);">立即使用</a>
            <a class="btns-right js-close" href="javascript:void(0);">关闭</a>
        </div>
    </div>
</div>


<!--页脚 footer-->
<template data-src="../public/layout/footer.html"></template>
<!--页脚 footer end-->
<script type="text/javascript" src="../public/jquery/jquery.min.js"></script>
<script type="text/javascript" src="../public/js/common.js"></script>
<script src="../public/js/bootstrap.js"></script>
<script src="js/couponDetail.js"></script>
<script type="text/javascript" src="../public/js/template.js"></script>

<script>
    foo.onload = function (w, l) {
        console.log('可以在此处回调，w指window，l指loadJs')
    };
    foo.start();
    var sends = {
        checked: 1,
        send: function () {
            var numbers = /^1\d{10}$/;
            var val = $('.phone-num input').val().replace(/\s+/g, ""); //获取输入手机号码
            if (numbers.test(val)) {
                var time = 60;

                function timeCountDown() {
                    if (time == 0) {
                        clearInterval(timer);
                        $('.verification-num a').addClass('send1').removeClass('send0').html("发送验证码");
                        sends.checked = 1;
                        return true;
                    }
                    $('.verification-num a').html(time + "s倒计时");
                    time--;
                    return false;
                    sends.checked = 0;
                }

                $('.verification-num a').addClass('send0').removeClass('send1');
                timeCountDown();
                var timer = setInterval(timeCountDown, 1000);
            }
        }
    }


</script>


</body>
</html>